<template>
    <div>
        <!--轮播图-->
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="image in images">
                <van-image width="100%" height="250px" :src="image" />
            </van-swipe-item>
        </van-swipe>

        <!--宫格-->
        <van-grid square >
            <van-grid-item icon="https://gitee.com/dhymon/figurebed/raw/master/img/美食.png" text="美食" @click="food()"/>
            <van-grid-item icon="https://gitee.com/dhymon/figurebed/raw/master/img/水果.png" text="水果" @click="fruit()"/>
            <van-grid-item icon="https://gitee.com/dhymon/figurebed/raw/master/img/下午茶.png" text="下午茶" @click="tea()"/>
            <van-grid-item icon="https://gitee.com/dhymon/figurebed/raw/master/img/早餐.png" text="早餐" @click="breakfast()"/>
        </van-grid>

        <!--店家卡片-->
        <van-card
                v-for="(store,index) in stores"
                :desc="store.detail"
                :title="store.name"
                :thumb="store.pic"
                @click="toStore(store.userId)"
        />

        <div style="height: 50px"></div>
    </div>
</template>

<script>
    export default {
        name: "HomePage",
        data(){
            return{
                images: [
                    'https://gitee.com/dhymon/figurebed/raw/master/img/美食标题1.jpg',
                    'https://gitee.com/dhymon/figurebed/raw/master/img/招聘广告.jpg',
                ],
                stores: [
                    {
                        id: 0,
                        userId: 1,
                        name: "例子",
                        detail: '汤好评',
                        pic: 'https://img.yzcdn.cn/vant/ipad.jpeg',
                    },
                ]
            }
        },
        components: {

        },
        methods: {
            food(){
                console.log('food');
                axios.post("/findStore/food")
                .then(res=>{
                    this.stores = res.data;
                })
            },
            fruit(){
                console.log('fruit');
                axios.post("/findStore/fruit")
                .then(res=>{
                    this.stores = res.data;
                })
            },
            tea(){
                console.log('tea');
                axios.post("/findStore/tea")
                .then(res=>{
                    this.stores = res.data;
                })
            },
            breakfast(){
                console.log('breakfast');
                axios.post("/findStore/breakfast")
                .then(res=>{
                    this.stores = res.data;
                })
            },
            toStore(userId){
                console.log(userId);
                this.$store.state.userId = userId;
                this.$router.push('/store')
            }
        },
        created() {
            console.log("==>StoreList");
            axios.post("/allStore").then(res=>{
                // console.log(res);
                this.stores = res.data;
            })
        }
    }
</script>

<style scoped>

</style>